<template>
	<view>
		<view class="g-content" v-if="viewList.length>0">

			<view class="conditions">
				<scroll-view scroll-x style="white-space: nowrap;">
					<view style="display: flex;">


						<view class="condition-item" v-for="(item, index) in viewList" :key="index">
							<text style="margin-right: 10rpx;font-size: 22rpx;">{{item.name}}</text>
							<u-icon name="close" @click="clear(index)" size="12"></u-icon>
						</view>
					</view>
				</scroll-view>
			</view>

			<text class="clear-text" @click="allClean">清除</text>

		</view>
	</view>
</template>

<script>
	export default {
		name: "screen-data",
		data() {
			return {
				viewList: []
			};
		},
		
		
		watch:{
			"$store.state.params.screenData":{
				handler(newData, old){
					console.log('store数据变化了', newData);
					
					let that = this
					
					let res = newData
					
					that.viewList = []
					
					if (!uni.$u.test.isEmpty(res.selBrandList)) {
						res.selBrandList.forEach(item => {
							that.viewList.push({
								name:item.value,
								value:[item.code],
								typeName:['carBrand']
							})
						})
					}
					
					that.$store.state.params.filterCondition.forEach(item => {
						if ('carBrand' != item.type) {
							//车辆品牌是多选，在selBrandList里取，其他是单选，在这里取
							item.childList.forEach(child => {
								if (child.check) {
									that.viewList.push({
										name:child.value,
										value:[child.code],
										typeName:[that.covertName(item.type)]
									})
								}
							})
						}
					
					})
					
					if (!uni.$u.test.isEmpty(res.startTime) && !uni.$u.test.isEmpty(res.endTime)) {
						that.viewList.push({
							name:res.startTime + '至' + res.endTime,
							value:[res.startTime, res.endTime],
							typeName:['orderCreateStartTime', 'orderCreateEndTime']
						})
					}
					
					
					if (!uni.$u.test.isEmpty(res.selChannel) && !uni.$u.test.isEmpty(res.selChannel.channelName)) {
						that.viewList.push({
							name:res.selChannel.channelName,
							value:[res.selChannel.channelId],
							typeName:['channelId']
						})
					}
					
					if (!uni.$u.test.isEmpty(res.deptName)) {
						that.viewList.push({
							name:res.deptName,
							value:[res.deptId],
							typeName:['deptId']
						})
					}
					
					console.log('处理后的viewList', that.viewList);
					
					let carBrandList=[]
					let resultData={
					}
					
					if(!uni.$u.test.isEmpty(that.viewList)){
						that.viewList.forEach(item=>{
							
							//对品牌（多选）进行特殊处理
							if('carBrand'==item.typeName[0]){
								carBrandList.push(item.value[0])
							}else{
								//其他参数直接赋值
								resultData[item.typeName[0]] = item.value[0]
							}
							
							//对时间特殊处理
							if(item.typeName.length>1 && item.value.length>1){
								resultData[item.typeName[1]] = item.value[1]
							}
							
						})
					}
			
					
					if(!uni.$u.test.isEmpty(carBrandList)){
						resultData.carBrand = carBrandList.join(',')
					}
					
					//给页面发送封装好的请求参数
					this.$emit('dataChange', resultData)
				}
			}
		},
		
		mounted() {
			/**
			 * 		selBrandList:this.selBrandList,
					startTime:this.startTime,
					endTime:this.endTime,
					selChannel:this.selChannel,
					deptName:this.deptName,
					deptId:this.deptId,
			 */

			// let that = this

			// let res = this.$store.state.params.screenData

			// that.viewList = []

			// if (!uni.$u.test.isEmpty(res.selBrandList)) {
			// 	res.selBrandList.forEach(item => {
			// 		that.viewList.push(item.value)
			// 	})
			// }

			// that.$store.state.params.filterCondition.forEach(item => {
			// 	if ('carBrand' != item.type) {
			// 		//车辆品牌是多选，在selBrandList里取，其他是单选，在这里取
			// 		item.childList.forEach(child => {
			// 			if (child.check) {
			// 				that.viewList.push(child.value)
			// 			}
			// 		})
			// 	}

			// })

			// if (!uni.$u.test.isEmpty(res.startTime) && !uni.$u.test.isEmpty(res.endTime)) {
			// 	that.viewList.push(res.startTime + '至' + res.endTime)
			// }

			// if (!uni.$u.test.isEmpty(res.selChannel) && !uni.$u.test.isEmpty(res.selChannel.channelName)) {
			// 	that.viewList.push(res.selChannel.channelName)
			// }

			// if (!uni.$u.test.isEmpty(res.deptName)) {
			// 	that.viewList.push(res.deptName)
			// }
		},
		methods: {
			clear(index) {
				console.log('清除单个');
				
				let itemData = this.viewList[index]
				
				// this.viewList.splice(index, 1)
				
				uni.$emit('clearOne', itemData);
				
			},

			allClean() {
				console.log('清除所有');

				// this.viewList = []
				uni.$emit('clearAll', true);
			},
			
			covertName(old){
				return {
					screeningCriteriaCarStatus:'screeningCriteriaCarStatus',
					screeningCriteriaDaysBeyondOrNear:'screeningCriteriaDaysBeyondOrNear',
					warehouse:'warehouse',
					screeningCriteriaPendingViolationNumber:'illegalNumber',
					screeningCriteriaPendingViolationPointsDeducted:'illegalScore',
					orderSortType:'orderSortType',
					placeOrderType:'placeOrderType',
					applyType:'applyType',
					screeningCriteriaLeaseType:'rentType',
					screeningOrderCarStatus:'statusKey',
					screeningCriteriaPendingViolationAmountOfFine:'illegalAmount',
					screeningCriteriaReminders:'screeningCriteriaReminders',
					screeningCriteriaOfflineDuration:'offlineTime',
					screeningCriteriaALarmType:'screeningCriteriaALarmType',
					screeningCriteriaUntreatedDuration:'screeningCriteriaUntreatedDuration',
          screeningCriteriaOverdueDays:'screeningCriteriaOverdueDays',
				}[old];
			}
		},
	}
</script>

<style lang="scss" scoped>
	.g-content {
		height: 70rpx;
		background-color: #f5f5f5;
		display: flex;
		align-items: center;
		position: relative;
	}

	.conditions {
		width: 85%;
		display: flex;
		align-items: center;
	}

	.condition-item {
		height: 45rpx;
		border-radius: 90rpx;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		margin: 5rpx 0 0 20rpx;
		justify-content: center;
		color: #333;
		background-color: #fff;
	}

	.clear-text {
		position: absolute;
		right: 20rpx;
		width: 80rpx;
		line-height: 45rpx;
		color: #a7a7a7;
		font-size: 22rpx;
		text-align: center;
		background-color: #eaeaea;
		border-radius: 90rpx;
	}
</style>
